<template>
  <div>
    <!-- 订单详情 -->
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-steps :active="Schedule" align-center finish-status="success">
            <el-step
              title="已下单"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
            <el-step
              title="已付款"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
            <el-step
              title="已发货"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
            <el-step
              title="已完成"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
          </el-steps></div
      ></el-col>
    </el-row>

    <!-- 订单概况 -->
    <div class="Order_Details">
      <h3>订单概况</h3>

      <div class="Order_Details_Table">
        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              订单编号：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">下单时间：</div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">订单状态：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              是否使用预存款支付：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              满优惠金额：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">优惠券金额：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              积分金额：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              红包金额：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">订单原始金额：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Bottom">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              订单总优惠金额：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              订单修改金额：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              订单实际交易金额：
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <!-- 物流信息 -->
    <div class="Order_Details">
      <h3>物流信息</h3>

      <div class="Order_Details_Table">
        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              物流公司：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">物流单号：</div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">配送方式：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              运费：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              收货地址：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">详细地址：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              收货人：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              联系电话：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">手机：</div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Bottom">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              邮编：
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              客户留言：
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <!-- 发票信息 -->

    <div class="Order_Details">
      <h3>物流信息</h3>

      <div class="Order_Details_Table">
        <el-row class="Order_Details_Table_Top">
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              不需要发票
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="Order_Details">
      <h3>商品列表</h3>
      <el-table :data="Order_Details_Table" style="width: 100%" border>
        <el-table-column
          prop="date"
          label="商品图片"
          width="100"
          align="center"
        >
          <el-image
            style="width: 50px; height: 50px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="fit"
          ></el-image>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="address" label="销售价格"> </el-table-column>
        <el-table-column prop="address" label="数量"> </el-table-column>
        <el-table-column prop="address" label="商品规格"> </el-table-column>
        <el-table-column prop="address" label="商品总价"> </el-table-column>
      </el-table>
    </div>

    <!-- 订单操作日记 -->
    <div class="Order_Details" >
      <h3>订单操作日记</h3>
      <el-table :data="Order_Details_Table_Diary" style="width: 100%" border>
        <el-table-column prop="address" label="操作类型"> </el-table-column>
        <el-table-column prop="address" label="操作人"> </el-table-column>
        <el-table-column prop="address" label="操作时间"> </el-table-column>
        <el-table-column prop="address" label="操作原因"> </el-table-column>
      </el-table>
    </div>

    <!-- 尾部按钮 -->
    <el-row :gutter="20" style="margin:20px 0">
      <el-col :span="12" :offset="6"
        ><div class="grid-content bg-purple" style=" text-align: center;">
            <el-button style="min-width:150px" size="medium" type="info" icon="el-icon-arrow-left" @click="Order_Details_back">返回订单列表</el-button>    
            <el-button type="primary" icon="el-icon-printer">打印</el-button>  
        </div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 付款进度
      Schedule: 1,

      //   商品列表表单数据
      Order_Details_Table: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      //   订单操作日记表单数据
      Order_Details_Table_Diary: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    //   返回订单列表按钮
    Order_Details_back(){
       this.$router.push('/OrderClass')
    }
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.Order_Details {
  h3 {
    height: 50px;
    line-height: 50px;
  }
  .Order_Details_Table {
    border: 1px solid #ebeef5;
    .Order_Details_Table_Top {
      border-bottom: 1px solid #ebeef5;
      min-height: 40px;
      line-height: 40px;
    }
    .Order_Details_Table_Bottom {
      min-height: 40px;
      line-height: 40px;
    }
  }
}
</style>
